23.06.06
오늘 한 일
- 알고리즘 문제 풀이
- 디지털콘텐츠기획 ppt 2/3 완성
- IT특강 프로젝트 레이아웃 구상
- 카공실록 로그인 페이지 구현(lottie 적용)
- 카공실록 react hook form 적용
-
카공실록 오후 11시 회의
카공실록 로그인 페이지 구현
카카오톡 로그인으로 진행하기 때문에 별다른 input은 없었다. 대신 이번에 lottie를 처음 적용해보았다.
react에 lottie를 적용하기 위해서는 라이브러리를 사용해야 한다.
react-lottie
react-lottie는 lottie를 react에서 사용할 수 있도록 도와주는 라이브러리이다.
근데 문제가 몇가지 있었다.
Module not found: Can't resolve 'prop-types' 그래서
prop-types를 설치하니 해결은 됐다.Warning: componentWillUpdate has been renamed, and is not recommended for use.
이 라이브러리 자체의 문제인 것 같아 다른 라이브러리를 사용하기로 했다.
lottie-react
lottie-react도 react-lottie와 같은 기능을 하는 라이브러리이다.
이 라이브러리를 쓰니 더이상 에러가 나지 않았다.
'use client';
import * as animationData from '../../../../public/assets/lotties/prography_motion_intro.json';
import KakaoButton from '@/components/auth/KakaoButton';
import Lottie from 'lottie-react';
import Link from 'next/link';
export default function Page() {
const handleClick = () => {
// TODO: 카카오 로그인 처리
};
return (
<div className='flex h-screen flex-col items-center justify-center px-6'>
<Lottie animationData={animationData} loop={true} className='h-52 flex-shrink-0' />
<KakaoButton className='mb-4 mt-5' onClick={handleClick} />
<Link
href='/'
className='cursor-pointer text-[14px] font-normal leading-6 text-bk60 underline underline-offset-2'
>
로그인 없이 둘러보기
</Link>
</div>
);
}
IT특강 프로젝트
vite + React + tailwindcss + typescript로 진행하기로 했다.
만드려는 서비스는 과거 한 시점에서 어떤 주식을 샀으면 얼마나 벌었을지를 계산해주는 서비스이다.
아직 디자인을 제대로 생각해보지 않아서 어떤 느낌으로 만들지는 모르겠지만 들어가야하는 것들은 다음과 같다.
- 주식명 검색
- 언제 샀는지
- 얼마나 샀는지
- 얼마나 벌었는지
검색하기 위해 headlessui의 combobox를 사용하기로 했다.
그리고 언제 샀는지 입력받기 위해 datepicker를 찾아보았는데, react-datepicker가 제일 많이 쓰는 것 같았다.
근데 뭔가 마음에 안 들어서 더 찾아보았는데, Flowbite 라이브러리의 datepicker가 마음에 들었다. 하지만 react에서 커스텀하기 복잡했다. 그래서 더 찾아보니 tailwind-datepicker-react 라이브러리가 Flowbite의 datepicker를 react에서 사용할 수 있도록 만든 라이브러리였다. 그래서 이걸로 결정했다.
아직 api 명세가 없기 때문에 내일 수업 때 다 같이 모여서 회의하며 api를 정하고, 그 다음에는 디자인을 생각해보아야겠다.
내일 할 일
- 알고리즘 문제 풀이
- IT특강 팀 프로젝트
- 카공실록 회원가입 페이지 구현
- 디지털콘텐츠기획 ppt 완성
- 프로그라피 오프라인 팀 회의